<template>
  <div class="page">
    <el-form
      size="small"
      :inline="true"
      class="query-form"
      ref="searchForm"
      :model="searchForm"
      @keyup.enter.native="refreshList()"
      @submit.native.prevent
      v-if="dialog"
    >
      <!-- 搜索框-->
      <el-form-item prop="processType">
        <el-select
          v-model="searchForm.processType"
          placeholder="请选择流程类型"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in $dictUtils.getDictList('processnote')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="processnote">
        <el-select
          v-model="searchForm.processnote"
          placeholder="请选择流程类型备注"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in $dictUtils.getDictList('processnote')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="userInformation.id">
        <GridSelect
          title="选择申请用户"
          placeholder="请选择申请用户"
          labelName="userName"
          labelValue="id"
          :value="searchForm.userInformation.id"
          :limit="1"
          size="small"
          @getValue="
            (value) => {
              searchForm.userInformation.id = value;
            }
          "
          :columns="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'userName',
              label: '用户名',
            },
          ]"
          :searchs="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'userName',
              label: '用户名',
            },
          ]"
          dataListUrl="/dlyrl/hr/userinformation/userInformation/list"
          entityBeanName="userInformation"
          queryEntityUrl="/dlyrl/hr/userinformation/userInformation/queryById"
        >
        </GridSelect>
      </el-form-item>
      <el-form-item prop="enterpriseInformation.id">
        <GridSelect
          title="选择所属企业"
          placeholder="请选择所属企业"
          labelName="companyName"
          labelValue="id"
          :value="searchForm.enterpriseInformation.id"
          :limit="1"
          size="small"
          @getValue="
            (value) => {
              searchForm.enterpriseInformation.id = value;
            }
          "
          :columns="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'companyName',
              label: '企业名称',
            },
          ]"
          :searchs="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'companyName',
              label: '企业名称',
            },
          ]"
          dataListUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/list"
          entityBeanName="enterpriseInformation"
          queryEntityUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/queryById"
        >
        </GridSelect>
      </el-form-item>
      <el-form-item prop="startTime">
        <el-date-picker
          v-model="searchForm.startTime"
          type="datetime"
          size="small"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择开始时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="auditstatus">
        <el-select
          v-model="searchForm.auditstatus"
          placeholder="请选择审核状态"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in $dictUtils.getDictList('audit_type')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="auditor.id">
        <GridSelect
          title="选择审核人"
          placeholder="请选择审核人"
          labelName="userName"
          labelValue="id"
          :value="searchForm.auditor.id"
          :limit="1"
          size="small"
          @getValue="
            (value) => {
              searchForm.auditor.id = value;
            }
          "
          :columns="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'userName',
              label: '用户名',
            },
          ]"
          :searchs="[
            {
              prop: 'id',
              label: '主键',
            },
            {
              prop: 'userName',
              label: '用户名',
            },
          ]"
          dataListUrl="/dlyrl/hr/enterpriseuserinformation/enterpriseUserInformation/list"
          entityBeanName="enterpriseUserInformation"
          queryEntityUrl="/dlyrl/hr/enterpriseuserinformation/enterpriseUserInformation/queryById"
        >
        </GridSelect>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" @click="refreshList()" size="small"
          >查询</el-button
        >
        <el-button @click="resetSearch()" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 导入导出-->
    <el-dialog title="导入Excel" :visible.sync="isImportCollapse">
      <el-form
        size="small"
        :inline="true"
        v-show="isImportCollapse"
        ref="importForm"
      >
        <el-form-item>
          <el-button type="default" @click="downloadTpl()" size="small"
            >下载模板</el-button
          >
        </el-form-item>
        <el-form-item prop="loginName">
          <el-upload
            class="upload-demo"
            :action="`${this.$http.BASE_URL}/dlyrl/hr/applicationprocess/applicationProcess/import`"
            :on-success="uploadSuccess"
            :show-file-list="true"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只允许导入“xls”或“xlsx”格式文件！
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="bg-white">
      <el-row>
        <el-button
          v-if="
            hasPermission('dlyrl:hr:applicationprocess:applicationProcess:add')
          "
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="add()"
          >新建</el-button
        >
        <el-button
          v-if="
            hasPermission('dlyrl:hr:applicationprocess:applicationProcess:edit')
          "
          type="warning"
          size="small"
          icon="el-icon-edit-outline"
          @click="edit()"
          :disabled="dataListSelections.length != 1"
          plain
          >修改</el-button
        >
        <el-button
          v-if="
            hasPermission('dlyrl:hr:applicationprocess:applicationProcess:del')
          "
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="del()"
          :disabled="dataListSelections.length <= 0"
          plain
          >删除
        </el-button>
        <el-button
          type="text"
          style="float: right; font-size: 12px"
          @click="setDialog"
          >{{ dialog ? "收 起" : "展 开"
          }}<i
            :class="dialog ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"
          ></i
        ></el-button>
        <el-button-group class="pull-right">
          <el-button
            v-if="
              hasPermission(
                'dlyrl:hr:applicationprocess:applicationProcess:import'
              )
            "
            type="default"
            size="small"
            icon="el-icon-upload2"
            title="导入"
            @click="isImportCollapse = !isImportCollapse"
          ></el-button>
          <el-button
            v-if="
              hasPermission(
                'dlyrl:hr:applicationprocess:applicationProcess:export'
              )
            "
            type="default"
            size="small"
            icon="el-icon-download"
            title="导出"
            @click="exportExcel()"
          ></el-button>
          <el-button
            type="default"
            size="small"
            icon="el-icon-refresh"
            @click="refreshList"
          >
          </el-button>
        </el-button-group>
      </el-row>
      <el-table
        :data="dataList"
        size="small"
        :cell-style="cellStyle" style="border:1px solid #d6cfe2;"
        :header-cell-class-name="cellHeadStyle" 
        :row-class-name="tableRowClassName"
        height="calc(100% - 80px)"
        @selection-change="selectionChangeHandle"
        @sort-change="sortChangeHandle"
        v-loading="loading"
        class="table"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="processType"
          show-overflow-tooltip 
          label="流程类型"
          fixed="left"
        >
          <!-- <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              v-if="
                hasPermission(
                  'dlyrl:hr:applicationprocess:applicationProcess:edit'
                )
              "
              @click="edit(scope.row.id)"
            >
              {{
                $dictUtils.getDictLabel(
                  "processnote",
                  scope.row.processType,
                  "-"
                )
              }}</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              v-else-if="
                hasPermission(
                  'dlyrl:hr:applicationprocess:applicationProcess:view'
                )
              "
              @click="view(scope.row.id)"
            >
              {{
                $dictUtils.getDictLabel(
                  "processnote",
                  scope.row.processType,
                  "-"
                )
              }}</el-link
            >
            <span v-else>{{
              $dictUtils.getDictLabel("processnote", scope.row.processType, "-")
            }}</span>
          </template> -->
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="view(scope.row.id)"
            >
              {{
                $dictUtils.getDictLabel(
                  "processnote",
                  scope.row.processType,
                  "-"
                )
              }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="processnote"
          width="130"
          show-overflow-tooltip 
          label="流程类型备注"
        >
          <template slot-scope="scope">
            {{
              $dictUtils.getDictLabel("processnote", scope.row.processnote, "-")
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          show-overflow-tooltip 
          label="外出地址"
        >
        </el-table-column>
        <el-table-column
          prop="userInformation.userName"
          show-overflow-tooltip 
          label="申请用户"
        >
        </el-table-column>
        <el-table-column
          prop="enterpriseInformation.companyName"
          show-overflow-tooltip 
          label="所属企业"
        >
        </el-table-column>
        <el-table-column
          prop="startTime"
          show-overflow-tooltip 
          label="开始时间"
        >
        </el-table-column>
        <el-table-column
          prop="endTime"
          show-overflow-tooltip 
          label="结束时间"
        >
        </el-table-column>
        <el-table-column
          prop="duration"
          show-overflow-tooltip 
          label="时长"
        >
        </el-table-column>
        <el-table-column
          prop="processthereason"
          show-overflow-tooltip 
          label="流程事由"
        >
        </el-table-column>
        <el-table-column
          prop="auditstatus"
          show-overflow-tooltip 
          label="审核状态"
        >
          <template slot-scope="scope">
            {{
              $dictUtils.getDictLabel("audit_type", scope.row.auditstatus, "-")
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="auditor.userName"
          show-overflow-tooltip 
          label="审核人"
        >
        </el-table-column>
        <el-table-column
          prop="auditopinion"
          show-overflow-tooltip 
          label="审核意见"
        >
        </el-table-column>
        <el-table-column
          prop="remarks"
          show-overflow-tooltip 
          label="备注信息"
        >
        </el-table-column>
        <!-- <el-table-column
          header-align="center"
          align="center"
          fixed="right"
          :key="Math.random()"
          width="200"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="
                hasPermission(
                  'dlyrl:hr:applicationprocess:applicationProcess:view'
                )
              "
              type="text"
              icon="el-icon-view"
              size="mini"
              @click="view(scope.row.id)"
              >查看</el-button
            >
            <el-button
              v-if="
                hasPermission(
                  'dlyrl:hr:applicationprocess:applicationProcess:edit'
                )
              "
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="edit(scope.row.id)"
              >修改</el-button
            >
            <el-button
              v-if="
                hasPermission(
                  'dlyrl:hr:applicationprocess:applicationProcess:del'
                )
              "
              type="text"
              icon="el-icon-delete"
              size="mini"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <ApplicationProcessForm
      ref="applicationProcessForm"
      @refreshDataList="refreshList"
    ></ApplicationProcessForm>
  </div>
</template>

<script>
import ApplicationProcessForm from "./ApplicationProcessForm";
import GridSelect from "@/components/gridSelect";
import tableStyles from '../../../../../utils/mixins.js'
export default {
  mixins: [tableStyles],
  data() {
    return {
      searchForm: {
        processType: "",
        processnote: "",
        userInformation: {
          id: "",
        },
        enterpriseInformation: {
          id: "",
        },
        startTime: "",
        auditstatus: "",
        auditor: {
          id: "",
        },
      },
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      orderBy: "",
      dataListSelections: [],
      isImportCollapse: false,
      loading: false,
      dialog: false,
    };
  },
  components: {
    GridSelect,
    ApplicationProcessForm,
  },
  activated() {
    this.refreshList();
  },
  methods: {
    setDialog() {
      this.dialog = !this.dialog;
    },
    // 获取数据列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: "/dlyrl/hr/applicationprocess/applicationProcess/list",
        method: "get",
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          orderBy: this.orderBy,
          ...this.searchForm,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.dataList = data.page.list;
          this.total = data.page.count;
          this.loading = false;
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.refreshList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.refreshList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },

    // 排序
    sortChangeHandle(obj) {
      if (obj.order === "ascending") {
        this.orderBy = obj.prop + " asc";
      } else if (obj.order === "descending") {
        this.orderBy = obj.prop + " desc";
      } else {
        this.orderBy = "";
      }
      this.refreshList();
    },
    // 新增
    add() {
      this.$refs.applicationProcessForm.init("add", "");
    },
    // 修改
    edit(id) {
      id =
        id ||
        this.dataListSelections.map((item) => {
          return item.id;
        })[0];
      this.$refs.applicationProcessForm.init("edit", id);
    },
    // 查看
    view(id) {
      this.$refs.applicationProcessForm.init("view", id);
    },
    // 删除
    del(id) {
      let ids =
        id ||
        this.dataListSelections
          .map((item) => {
            return item.id;
          })
          .join(",");
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "/dlyrl/hr/applicationprocess/applicationProcess/delete",
          method: "delete",
          params: { ids: ids },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.refreshList();
          }
          this.loading = false;
        });
      });
    },
    // 导入成功
    uploadSuccess(res, file) {
      if (res.success) {
        this.$message.success({
          dangerouslyUseHTMLString: true,
          message: res.msg,
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    // 下载模板
    downloadTpl() {
      this.$utils.download(
        "/dlyrl/hr/applicationprocess/applicationProcess/import/template"
      );
    },
    exportExcel() {
      let params = {
        ...this.searchForm,
      };
      this.$utils.download(
        "/dlyrl/hr/applicationprocess/applicationProcess/export",
        params
      );
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.refreshList();
    },
  },
};
</script>
<style scoped>
.bg-white{
  height: 100%;
}
</style>